<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/" prefix="util" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="core" %>
<util:template titulo="Compromisso">
    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            <form role="form" method="get" name="form-compromisso" action="intranet/compromisso/confirmar">
                <c:set var="listaconvidados" scope="session"/>
                <div class="panel-heading">
                    <h1 class="panel-title"><c:if test="${not empty id}">Editar</c:if><c:if test="${empty id}">Adicionar</c:if> compromisso</h1>
                    </div>
                <c:if test="${not empty id}">
                    <input class="form-control" type="hidden" name="id" value="${id}">
                </c:if>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <label for="assunto" class="col-md-2 control-label">Assunto:</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="assunto" name="assunto"
                                       value ="${compromisso.assunto}" placeholder="Informe o assunto">
                            </div>
                        </div>

                        <div class="form-group row">


                            <label for="local" class="col-md-2 control-label">Local: </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="local" name="local"
                                       value ="${compromisso.localCompromisso}" placeholder="Informe o local">
                            </div>

                        </div>
                        <div class="form-group row">
                            <label for="dataInicio" class="col-md-2 control-label">Inic&iacute;o:</label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="dataInicio"  name="dataInicio"
                                       placeholder="dd/mmm/aaaa hh:mm:ss"
                                       value="<fmt:formatDate pattern="dd/MM/yyyy hh:mm:ss" value="${compromisso.dataInicio}"/>"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="dataTermino" class="col-md-2 control-label">T&eacute;rmino: </label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="dataTermino" name="dataTermino"
                                       placeholder="dd/mmm/aaaa hh:mm:ss"
                                       value="<fmt:formatDate pattern="dd/MM/yyyy hh:mm:ss" value="${compromisso.dataTermino}"/>"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="diaInteiro" class="col-md-2 control-label">Dia inteiro? </label>
                            <div class="col-md-1">
                                <input type="checkbox" class="input-sm" id="diaInteiro" name="diaInteiro"
                                       value ="${compromisso.diaInteiro}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="usuarios" class="col-md-2 control-label">Convidar</label>
                            <div class="col-md-6">
                                <select class="form-control" id="usuarios" name="usuarios" maxlength="40"
                                        style="width:350px">

                                    <option value=''></option>
                                    <c:forEach items="${usuarios}" var="usu">                                                                                
                                        <c:set var="temUsu" value="0" scope="page"/>                                        
                                        <c:if test="${usuario.id ne usu.id }">                                                                                       
                                            <c:forEach items="${compromisso.usuarios}" var="usucomp" varStatus="" >

                                                <c:if test="${usucomp.id eq usu.id and temUsu==0}">
                                                    <c:set var="temUsu" value="1" scope="page"/>                                                    
                                                </c:if>                                                                                        
                                            </c:forEach>                                                                                
                                            <c:if test="${temUsu==0}"><option value='${usu.id}'>${usu.nome}</option></c:if>                                                    
                                        </c:if>                                         
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button id="incluiusuario" type="button" class="btn btn-primary" onclick="adicionaConvidado();">Adicionar <i class="glyphicon glyphicon-plus-sign"></i></button>
                            </div>
                        </div>

                        <c:if test="${not empty compromisso.usuarios}">
                            <div class="form-group row">
                                <label for="listaconvidados" class="col-md-2 control-label">Escolhidos</label>
                                <div class="col-md-6">
                                    <div class="table-responsive">
                                        <table id="convidados" name="convidados" class="table table-striped table-hover table-bordered">
                                            <thead>
                                                <tr>                                                
                                                    <th>Nome</th>                                             
                                                    <th style="width: 110px;">Ações</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <c:if test="${empty compromisso.usuarios}">
                                                    <tr><td colspan="2">A lista está vazia</td></tr>
                                                </c:if>
                                                <c:if test="${not empty compromisso.usuarios}">
                                                    <c:forEach items="${compromisso.usuarios}" var="usu">
                                                        <c:if test="${usuario.id ne usu.id}">
                                                            <tr id="conv_${usu.id}" name="conv_${usu.id}">                                                        
                                                                <td>${usu.nome}</td>                                                        
                                                                <td>
                                                                    <div class="btn-group">                                                                
                                                                        <button type="button" class="btn btn-danger" onclick="return removeConvidado(${usu.id})">
                                                                            <i class="glyphicon glyphicon-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </c:if>
                                                    </c:forEach>
                                                </c:if>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </c:if>


                        <div class="form-group row">
                            <label for="textareaDescricao" class="col-md-2 control-label">Descri&ccedil;&atilde;o:</label>
                            <div class="col-md-10">
                                <textarea id="descricao" name="descricao" class="form-control" rows="5" cols="55"
                                          value ="${compromisso.descricao}" maxlength="254"></textarea>
                            </div>
                        </div>
                        <div class="form-actions">                            
                            <button type="submit" class="btn btn-primary"  onclick="envConv(${listaconvidados})">Enviar</button>
                            <button type="reset" class="btn btn-default">Limpar</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <script>
        function adicionaConvidado()
        {
            var y = document.getElementById("usuarios");
            var i = document.getElementById("usuarios").selectedIndex;
            var x = document.getElementById("usuarios").options[i];
            var tabela = document.getElementById("convidados");

            if (x.value !== '') {
                var row = tabela.insertRow(-1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);

                var btn = document.createElement("BUTTON");
                var img = document.createElement("I");
                var dv = document.createElement("DIV");

                dv.className = "btn-group";
                img.className = "glyphicon glyphicon-trash";
                btn.type = "button";
                btn.className = "btn btn-danger";
                btn.appendChild(img);
                btn.setAttribute("onclick", "return removeConvidado(" + x.value + ")");

                dv.appendChild(btn)

                try
                {

                    row.id = "conv_" + x.value;
                    row.name = "conv_" + x.value;
                    cell1.innerHTML = x.text;

                    cell2.appendChild(dv);
                    y.remove(i);

                }
                catch (e)
                {

                }
            }
        }

        function removeConvidado(object)
        {
            var x = document.getElementById("usuarios");
            var tabela = document.getElementById("convidados");
            var tr = document.getElementById("conv_" + object);
            var option = document.createElement("option");
            var tamId = tr.id.length;
            var idx = tr.id.indexOf("_");
            try
            {
                option.value = tr.id.substr(idx + 1, tamId - (idx + 1));
                option.text = tr.innerText;
                tabela.deleteRow(tr.rowIndex);
                x.add(option, null);
                x.selectedIndex = 0;

            }
            catch (e)
            {

            }
        }

        function envConv(object) {
            var lista = object;
            var tabela = document.getElementById("convidados");                        
            var qtd = tabela.rows.length;
            var i;                       
            var idx;
            var lin;
            var tam;
            
            for (i = 1; i < qtd; i++) {
                lin = tabela.rows[i];
                idx = lin.id.indexOf("_"); 
                tam = lin.id.length;
                
                lista.push(lin.id.substr(idx+1,tam-(idx+1)));
                
            }
            
            
            return lista;
        }
    </script>
</util:template>


